
const path = require('path')
// 打包时自动拷贝页面到输出目录
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require("mini-css-extract-plugin");


module.exports={
    mode: 'development',
    devtool: 'source-map',
     resolve: {
    // 配置路径别名
    alias: {
      '@': path.resolve(__dirname, 'src'),
      'Utils': path.resolve(__dirname, 'src/utils'),
    }
  },
    // 入口
    entry:'./src/index.js',
    output:{
        path:path.join(__dirname,'./build'),
        filename:'index.js',
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:'./src/index.html'
        }),
         new MiniCssExtractPlugin()
    ],
    devServer:{
        port:3009,
        open:true,
         proxy: [
      {
        context: ['/bw'],
        target: 'http://localhost:3009',
        pathRewrite: { '^/bw': '' },
      },
    ],
    },
    module: {
    // 配置loader
    rules: [
      {
        // 当 webpack 解析到 css 后缀的文件时使用此loader处理
        test: /\.(css|scss|sass)$/,
        use: [
          MiniCssExtractPlugin.loader, // 把 js 中 css 提取到对应的 css 文件中
          // 'style-loader', // 把解析好的 css 内容插入到页面的 style 标签内
          'css-loader', // 解析 css 文件
          'sass-loader' // 解析 sass 文件, 解析时需要依赖 sass 
        ]
      },
      {
        // 处理引入的图片
        test: /\.(jpg|png|svg|webp)$/,
        type: 'asset' // 自动把小于 8kb 的图片转成 base64 格式
      },
      {
        test: /\.html$/,
        // 解析html中的图片
        use: ['html-loader']
      },
      {
        // 通过 babel 把 es6+ 语法转译成低版本语法
        test: /\.js/,
        // 解析时排除 node_modules 中的文件
        exclude: /node_modules/,
        use: 'babel-loader'
      }
    ]
  },
}